<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>肖正威</title>
		<style type="text/css">
			ul {
				background-color: #f5f5f5;
				padding: 20px 40px;
			}
			
			ul li {
				padding: 0px 20px;
				line-height: 1.5em;
				background-color: red;
				margin: 5px;
			}
			
			.form-box {
				width: 200px;
				height: 200px;
				background-color: green;
			}
		</style>
		<script type="text/javascript" src="../public/jquery-2.1.0.js"></script>
	</head>

	<body>
    <h1>WELCOME</h1>
		<!--
			dragstart:网页元素开始拖动时触发。
			drag:被拖动的元素在拖动过程中持续触发。
			dragenter:被拖动的元素进入目标元素时触发，应在目标元素监听该事件。
			dragleave:被拖动的元素离开目标元素时触发，应在目标元素监听该事件。
			dragover:被拖动元素停留在目标元素之中时持续触发，应在目标元素监听该事件。
			drap:被拖动元素或从文件系统选中的文件，拖放落下时触发。
			dragend:网页元素拖动结束时触发。
		-->
<!--
		<div class="form-box" draggable="true">

		</div>

		<div class="target" style="width: 400px;height: 400px; background-color: yellow;"></div>
		<script type="text/javascript">
			var tmp = null;
			var parent = null;
			var div = document.getElementsByClassName("form-box")[0];
			var target = document.getElementsByClassName("target")[0];
				
				div.ondragstart = function(e) {
					tmp = this;
					e.dataTransfer.setData('text', 'Hello World!');
					e.dataTransfer.dropEffect = 'copy';
				}
				
				target.ondragenter = function(){
					parent = this;
				}
				div.ondragend = function(){
					if(tmp!=null && parent !=null)
						parent.appendChild(tmp);
				}
		</script>-->

		<div class="draggable">
			<ul class="from">
				<li draggable="true">Item A</li>
				<li draggable="true">Item B</li>
				<li draggable="true">Item C</li>
			</ul>
			<ul class="to"></ul>
		</div>

		<script type="text/javascript">
			var li = document.getElementsByTagName("li");
			var tmp = null;
			var target = document.getElementsByTagName("ul");
			for(var i = 0; i < li.length; i++) {
				li[i].ondragstart = function() {
					tmp = this;
				}
			}
			for(var i = 0; i < target.length; i++) {
				target[i].ondragover = function(e) {
					e.preventDefault();
					e.dataTransfer.dropEffect = 'move';
					this.style.bgColor = "green";
					this.appendChild(tmp);
				}
			}
		</script>

	</body>

</html>